<template>
  <div class="appBox">
    <div class="header">
      <div class="up">
        <div class="logo">
          <span>NONGKAIMING</span>
          <span>.COM</span>
        </div>
        <div class="search">
          <input
            type="search"
            value="HTML教程"
            onfocus="this.style.color='#333';if(this.value!='HTML教程'){this.style.color='#333'}else{this.value=''}"
            onblur="if(this.value ==''){this.style.color='#eeefed';this.value='HTML教程'}else{this.style.color='#eeefed'}"
          />
        </div>
      </div>
      <div div class="down">
        <div class="list">
          <!-- 循环顶部导航 -->
          <div v-for="item in list1" :key="item">
            <a href="">{{ item }}</a>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="left">
          <div class="letfTop"><h3>HTML 教程</h3></div>
          <div class="leftList">
            <div>
              <!-- 循环左侧列表 -->
              <a
                href="#"
                v-for="(item, index) in list2"
                :key="index"
                class="Llist"
                @click="clickList(index)"
                :class="{ changedBg: index == flag }"
                ><p class="listP">{{ item }}</p></a
              >
            </div>
          </div>
        </div>
        <div class="mid">
          <div class="midTop">
            <div class="mtl">HTML 教程</div>
            <div class="mtr">HTML 简介</div>
          </div>
          <div class="midMid">
            <div class="logo">
              <span>34</span>
              <span>农铠铭</span>
            </div>
          </div>
          <span class="words"
            >通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。</span
          >
          <div class="window">
            <iframe src="https://www.runoob.com/" frameborder="0"></iframe>
          </div>
          <span class="words">iframe语法:</span>
          <div class="ifYufa">
            <code style="line-height: 30px">
              &lt;iframe src="
              <em>URL</em>
              "&gt;&lt;/iframe&gt;
            </code>
          </div>
          <span class="words">该URL指向不同的网页。</span>
          <hr />
          <h2>iframe - 设置高度与宽度</h2>
          <div class="words">
            height 和 width 属性用来定义iframe标签的高度与宽度。
          </div>
          <div class="words">
            属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
          </div>
          <h2>iframe - 设置高度与宽度</h2>
          <div class="words">
            height 和 width 属性用来定义iframe标签的高度与宽度。
          </div>
          <div class="words">
            属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
          </div>
          <h2>iframe - 设置高度与宽度</h2>
          <div class="words">
            height 和 width 属性用来定义iframe标签的高度与宽度。
          </div>
          <div class="words">
            属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
          </div>
          <h2>iframe - 设置高度与宽度</h2>
          <div class="words">
            height 和 width 属性用来定义iframe标签的高度与宽度。
          </div>
          <div class="words">
            属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
          </div>
          <h2>iframe - 设置高度与宽度</h2>
          <div class="words">
            height 和 width 属性用来定义iframe标签的高度与宽度。
          </div>
          <div class="words">
            属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。
          </div>
        </div>
        <div class="right">
          <div class="rigTop"><h3>分类 导航</h3></div>
          <div class="rigList">
            <div id="item-list">
              <a
                href=""
                v-for="(item, index) in list3"
                :key="index"
                class="list3mu"
                ><p class="list3P">{{ item }}</p></a
              >
            </div>
            <!-- <div class="rigimg"><img src="./assets/123.png" alt="" /></div> -->
          </div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        '首页',
        'HTML',
        'CSS',
        'JAVASCRIPT',
        'VUE',
        'BOOTSTRAP',
        'NODEJS',
        'PYTHON3',
        'PYTHON2',
        'JAVA',
        'C',
        'C++',
        'C#',
        'GO',
        'SQL',
        'LINU',
        'JQUERY',
        '本地连接'
      ],
      list2: [
        'HTML 教程',
        'HTML 简介',
        'HTML 编辑器',
        'HTML 基础',
        'HTML 元素',
        'HTML 属性',
        'HTML 标题',
        'HTML 文本格式化',
        'HTML 链接',
        'HTML 头部',
        'HTML CSS',
        'HTML 图像',
        'HTML 表格',
        'HTML 列表',
        'HTML 区块',
        'HTML 布局',
        'HTML 表单',
        'HTML 框架',
        'HTML 颜色',
        'HTML 颜色名',
        'HTML 颜色值',
        'HTML 脚本',
        'HTML UR',
        'HTML UR',
        'HTML UR',
        'HTML UR',
        'HTML UR'
      ],
      list3: [
        'HTML 教程',
        'HTML 简介',
        'HTML 编辑器',
        'HTML 基础',
        'HTML 元素',
        'HTML 属性',
        'HTML 标题',
        'HTML 文本格式化',
        'HTML 链接',
        'HTML 头部',
        'HTML CSS',
        'HTML 图像'
      ],
      flag: 0
    }
  },
  methods: {
    clickList(index) {
      console.log(index)
      this.flag = index
    }
  }
}
</script>

<style lang="less">
.appBox {
  .header {
    height: 90px;
    width: 100%;
    position: absolute;
    .up {
      width: 1280px;
      height: 90px;
      margin: 0 auto;
    }
  }
}

.logo {
  width: 250px;
  height: 50px;
  position: relative;
  top: 20px;
  left: 10px;
  float: left;
  user-select: none;
}

.logo span {
  line-height: 50px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold';
  font-size: 40px;
  color: #333;
  user-select: none;
}
.logo span:nth-child(2) {
  color: #a23d40;
  user-select: none;
}

.search {
  width: 480px;
  height: 40px;
  background-color: #eeefed;
  position: relative;
  top: 25px;
  right: 25px;
  float: right;
  padding: 4px;
}

.search input {
  width: 100%;
  height: 100%;
  font-size: 20px;
  border-radius: 5px;
  border: 0;
  outline: none;
  box-shadow: 0px 1px 5px rgb(0 0 0 / 10%);
  padding-left: 10px;
  color: #eeefed;
  /* eeefed */
}
.down {
  height: 38px;
  width: 100%;
  background-color: #a23d40;
  position: absolute;
  .list {
    list-style: none;
    width: 1280px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    line-height: 40px;
    justify-content: space-around;
    & > div a {
      text-decoration: none;
      color: #fff;
      font-size: 15px;
    }
  }
}
.container {
  width: 1280px;
  height: auto;
  margin: 65px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .left {
    width: 200px;
    height: auto;
    border: 1px #eee solid;
    .letfTop {
      width: 100%;
      height: 40px;
      background-color: #f2f2f2;
      border-radius: 4px 4px 0 0;
      line-height: 40px;
      & > h3 {
        padding-left: 5px;
        color: #a23d40;
      }
      .leftList {
        width: 100%;
        height: 100%;
        & > div {
          list-style: none;
          margin: 4px;
        }
      }
    }
  }
  .mid {
    width: 860px;
    height: 760;
    .midTop {
      width: 100%;
      height: 45px;
      border: #eee 1px solid;
      .mtl {
        float: left;
        margin-left: 60px;
        line-height: 45px;
        color: grey;
      }
      .mtr {
        float: right;
        margin-right: 60px;
        line-height: 45px;
        color: grey;
      }
    }
    .midMid {
      width: 100%;
      height: 80px;
      border-bottom: 1px #eee solid;
    }
    .window {
      width: 100%;
      height: 300px;
      border-bottom: 1px #eee solid;
      margin: 10px 0px 10px 0px;
      & > iframe {
        width: 100%;
        height: 95%;
      }
    }
    .ifYufa {
      width: 100%;
      height: 30px;
      border: 1px #f6f4f0 solid;
      background-color: #f6f4f0;
      border-radius: 4px;
    }
  }
  .right {
    width: 180px;
    height: auto;
    border: 1px #eee solid;
    .rigTop {
      width: 100%;
      height: 40px;
      background-color: #f2f2f2;
      border-radius: 4px 4px 0 0;
      line-height: 40px;
      margin: 0 auto;
      h3 {
        /* padding-left: 5px; */
        color: #a23d40;
        display: flex;
        justify-content: center;
      }
    }
    .rigList {
      width: 100%;
      height: 100%;
    }
  }
}
.Llist {
  display: flex;
  flex-direction: column;
  height: 33px;
  width: 100%;
  text-decoration: none;
  color: #000;
  background-color: #f6f4f0;
  line-height: 33px;
  border-bottom: 1px #eee solid;
}
.listP {
  padding-left: 5px;
  font-size: small;
}
.changedBg {
  background-color: #a23d40;
  color: #fff;
  font-weight: bolder;
}
.words {
  font-size: small;
  margin: 10px;
}
.list3mu {
  display: flex;
  flex-direction: column;
  height: 33px;
  width: 100%;
  text-decoration: none;
  color: #000;
  background-color: #f6f4f0;
  line-height: 33px;
  border: 1px #fff solid;
}
.list3P {
  padding-left: 5px;
  font-size: small;
  &:hover {
    color: #000;
    font-weight: bolder;
  }
}
.rigimg img {
  margin-top: 30px;
  width: 130px;
}
</style>
